<template>
    <div class="forgot-box">
        <div class="login-box">
            <van-nav-bar>
                <template #left>
                    <div class="left-box">
                        <div class="logo">
                            <img class="auto-img" src="../assets/home_active.png" alt="" />
                        </div>
                        <div class="logo-text">Luckin Coffee</div>
                    </div>
                </template>
                <template #right>
                    <div class="home-text" @click="goPage('home')">首页</div>
                </template>
            </van-nav-bar>

            <div class="login-form">
                <div class="title">忘记密码!</div>
                <div class="en-title">forgot password!</div>
                <div class="login-form-box">
                    <van-form @submit="commit">
                        <van-field label="手机号" placeholder="手机号" v-model="userInfo.phone" autocomplete="off"
                            :rules="[{ required: true, message: '手机号必填' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]" />

                        <van-field label="新密码" placeholder="新密码(6-16位)" v-model="userInfo.password"
                            :type="isPassword ? 'password' : 'text'" :right-icon="isPassword ? 'closed-eye' : 'eye-o'"
                            @click-right-icon="viewPassword" autocomplete="off"
                            :rules="[{ required: true, message: '密码必填' }, { pattern: /^[A-Za-z]\w{5,15}$/, message: '密码支持数字字母下划线组合，且必须以字母开头，6-16位' }]" />

                        <van-field label="邮箱" placeholder="邮箱" v-model="userInfo.email" autocomplete="off"
                            :rules="[{ required: true, message: '邮箱必填' }, { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式不正确' }]" />

                        <van-field v-model="userInfo.validCode" center clearable label="邮箱验证码" placeholder="邮箱验证码(6位数字)"
                            autocomplete="off"
                            :rules="[{ required: true, message: '邮箱验证码必填' }, { pattern: /^\d{6}$/, message: '邮箱格式不正确' }]">
                            <template #button>
                                <van-button size="small" color="#0C34BA" :disabled="isSend" @click="sendValidCode">{{
                                        text
                                }}</van-button>
                            </template>
                        </van-field>

                        <div class="forgot">
                            <span class="lo-text" @click="goPage('login')">已有账号，立即登录</span>
                        </div>

                        <div class="login-btn">
                            <van-button round block native-type="submit" color="#0C34BA">提&nbsp;&nbsp;交</van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

import { useRouter } from "vue-router";

import request from '@/utils/request'



import { Toast } from "vant";

export default defineComponent({
    setup() {
        let router: any = useRouter();

        let isPassword: any = ref<boolean>(true);

        let userInfo: any = ref<any>({
            phone: "",
            password: "",
            email: "",
            validCode: "",
        });

        let text: any = ref<string>("发送验证码");

        let isSend: any = ref<boolean>(false);

        //查看首页
        let goPage: (name: string) => void = (name: string): void => {
            router.push({ name });
        };

        //查看密码
        let viewPassword: () => void = (): void => {
            isPassword.value = !isPassword.value;
        };

        //发送验证码
        let sendValidCode: () => void = (): void => {

            let reg: RegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

            if (!reg.test(userInfo.value.email)) {
                Toast('邮箱格式不正确');
                return;
            }

            let time: number = 120;
            text.value = time + "s后重新发送";
            isSend.value = true;

            let timer: any = setInterval(() => {
                if (time == 0) {
                    clearInterval(timer);
                    isSend.value = false;
                    text.value = "发送验证码";
                } else {
                    time--;
                    text.value = time + "s后重新发送";
                }
            }, 1000);

            //发起获取邮箱验证码请求
            request.post("/emailValidCode", { email: userInfo.value.email })
                .then((result: any): void => {
                    Toast(result.data.msg);
                })

        };

        //提交
        let commit: () => void = (): void => {
            //发起忘记密码请求

            request.post("/checkValidCode", {
                validCode: userInfo.value.validCode,
            })
                .then((result: any): void => {
                    if (result.data.code == "K001") {
                        //验证成功
                        updatePassword();
                    }
                })

        };

        //修改密码
        let updatePassword: () => void = (): void => {
            request.post("/retrievePassword", {

                phone: userInfo.value.phone,
                password: userInfo.value.password,
            })
                .then((result) => {
                    Toast(result.data.msg);
                    if (result.data.code == "L001") {
                        setTimeout(() => {
                            router.push({ name: "Login" });
                        }, 1000);
                    }
                })

        };

        return {
            isPassword,
            userInfo,
            text,
            isSend,
            goPage,
            viewPassword,
            sendValidCode,
            commit
        };
    },
});
</script>

<style lang="less" scoped>
.forgot-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;


    .home-text {
        color: #0c34ba;
        font-weight: bold;
        font-size: 14px;
    }

    .login-form {
        margin-top: 80px;
        padding: 0 10px;
    }

    .title {
        font-size: 30px;
    }

    .en-title {
        font-size: 18px;
        margin-top: 20px;
        color: #999;
    }

    .login-form-box {
        margin-top: 25px;
        padding: 15px;
    }

    :deep(.login-form-box .van-cell) {
        padding-left: 0;
        padding-right: 0;
    }

    .login-btn {
        margin-top: 40px;
    }

    .forgot {
        margin-top: 20px;
        color: #666;
        display: flex;

        .lo-text {
            margin-left: auto;
        }
    }

    .left-box {
        display: flex;
        align-items: center;
    }

    .logo {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
    }

    .logo-text {
        margin-left: 10px;
        font-weight: bold;
        font-size: 14px;
    }
}
</style>